<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--导航栏下-->
    <!-- bootstrap的css核心，定义了很多class -->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"/>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!--生成弹框、提示框、下拉菜单  -->
    <script type="text/javascript" src="/bootstrap/popper.min.js"></script>
    <!--bootstrap的js、用于响应事件  -->
    <script type="text/javascript" src="/bootstrap/bootstrap.min.js"></script>
    <link href="/css/style.css" rel="stylesheet" type="text/css" media="all"/>

    <!--导航栏上-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element.css">
    <style>
        html {
            height: 100%;
        }

        body {
            margin: 0px;
            padding: 0px;
            background-image: url('../image/yrAvc8mDF1_small.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            height: 100%;
        }

        #app {
            height: 90%;
        }

        .el-col {
            height: 100%;
        }

        .el-textarea .el-textarea__inner {
            resize: none;
        }

        .el-upload__input {
            display: none !important;
        }

        .el-menu--popup {
            min-width: 100%;
        }


    </style>
</head>
<body>


<div id="navigationBar">
    <div class="header-bottom">
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed"
                            data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span> <span
                            class="icon-bar"></span> <span class="icon-bar"></span> <span
                            class="icon-bar"></span>
                    </button>
                    <div class="logo">
                        <h1>
                            <a class="navbar-brand" href="/index.html">yoga</a>
                        </h1>
                    </div>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse nav-wil"
                     id="bs-example-navbar-collapse-1">
                    <nav class="cl-effect-1" id="cl-effect-1">
                        <ul class="nav navbar-nav">
                            <!--<li><a href="#home" class="active" data-hover="Home">首页</a></li>
                            <li><a href="#about" class="scroll" data-hover="About">关于</a></li>-->
                            <!--<li><a href="#services" class="scroll" data-hover="Services">私教课程</a></li>-->
                            <li><a href="#student" class="scroll" data-hover="student">学员风采</a></li>
                            <li v-if="roles != 0"><a href="/ClubMap.html"
                                                     class="scroll" data-hover="Team">场馆地图</a></li>
                            <li v-if="roles != 0"><a href="/CoachMap.html"
                                                     class="scroll" data-hover="Team">教练地图</a></li>
                            <li v-if="roles == 1||roles == 2"><a href="/student/showMe"
                                                                 class="scroll" data-hover="Team">学员信息完善</a></li>
                            <li v-if="roles == 1||roles == 3"><a href="/coach/showMe"
                                                                 class="scroll" data-hover="Team">教练信息完善</a></li>
                            <li v-if="roles == 1||roles == 4"><a
                                    href="/yogaclub/showMe" class="scroll" data-hover="Team">场馆信息完善</a></li>
                            <li><a href="#gallery" class="scroll" data-hover="Projects">会馆图片</a></li>
                            <li v-if="roles == -1"><a href="/login.html" class="scroll"
                                                      data-hover="login">登陆</a></li>
                            <li v-if="roles == -1"><a href="/register.html"
                                                      class="scroll" data-hover="register">注册</a></li>
                            <li v-if="roles == 5"><a href="/adminindex.html"
                                                     class="scroll" data-hover="register">管理</a></li>
                            <li
                                    v-if="roles == 1||roles == 2||roles == 3||roles == 4||roles ==5"><a
                                    href="/logout">注销</a></li>
                            <li>
                                <button class="btn btn-default " type="button"
                                        id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="true"
                                        style="opacity: 0.5; background-color: #4CAF50;"
                                        v-if="roles == 4">
                                    我 <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" style="opacity: 0.5"
                                    v-if="roles == 4">
                                    <li><a href="#">我的主页</a></li>
                                    <li><a href="/html/chat.html">信息中心</a></li>
                                </ul>
                                <button class="btn btn-default dropdown-toggle" type="button"
                                        id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="true" style="opacity: 0.5;" v-if="roles == 3">
                                    我 <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"
                                    style="opacity: 0.5" v-if="roles == 3">
                                    <li><a href="/orderShowCoach.html">我的订单</a></li>
                                    <li><a href="/coachmes.html">我的详情</a></li>
                                    <li><a href="/pocket.html">我的钱包</a></li>
                                    <li><a href="/html/chat.html">信息中心</a></li>
                                </ul>
                                <button class="btn btn-default dropdown-toggle" type="button"
                                        id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="true" style="opacity: 0.5;" v-if="roles == 2">
                                    我 <span class="caret"></span>
                                </button>

                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu3"
                                    style="opacity: 0.5" v-if="roles == 2">
                                    <li><a href="/orderShowStudent.html">我的订单</a></li>
                                    <li><a href="/pocket.html">我的钱包</a></li>
                                    <li><a href="/html/chat.html">信息中心</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>


                <div class="collapse navbar-collapse nav-wil">
                    <div class="cl-effect-1" id="cl-effect-2"></div>
                </div>
                <!-- /.navbar-collapse -->
            </nav>
        </div>
    </div>
</div>


<div id="app">
    <el-container style="height: 100%">
        <!--头部标签-->
        <el-header style="height: 1px">

        </el-header>
        <el-row style="height: 100%">
            <!--左侧导航栏-->
            <el-col :span="3" :offset="2" style="background-color:rgba(255,251,255,0.3);margin-right: 10px">
                <p>
                <h6 style="text-align: center;">
                    <el-badge :hidden="totalNum == 0" :value="totalNum" :max="99" class="item">信息中心</el-badge>
                </h6>
                </p>
                <el-menu
                        :default-active="this.$route.path"
                        :router="true"
                        class="el-menu-vertical-demo"
                        background-color="rgba(255,251,255,0)">
                    <el-badge :hidden="a.num == 0" :value="a.num" style="width: 100%" class="item"
                              v-for="(a,index) in navigationBar" :key="index">
                        <el-menu-item style="width: 100%" :index="a.name" @click="init(index)"
                        >
                            <i :class="a.icon"></i>
                            <span slot="title">{{a.mes}}</span>
                        </el-menu-item>
                    </el-badge>
                </el-menu>
            </el-col>

            <!--主界面-->
            <el-col :span="16" style="padding: 10px;background-color:rgba(255,251,255,0.1)">
                <el-card shadow="always" style="margin-bottom: 20px;font-size: 12px">
                    {{mes}}
                </el-card>

                <router-view v-if="isRouterAlive"></router-view>

            </el-col>
        </el-row>
    </el-container>
</div>

<!--我的关注-->
<template id="myFollow">
    <!--信息栏-->
    <el-card shadow="always" style="height: 87%;text-align: center;background-color:rgba(255,251,255,0.1)"
             :body-style="{ height:'100%',padding:'0px' }">
        <!--头部-->
        <el-row style="border-bottom: 1px solid #e9eaec;height: 7%;font-size: 12px;line-height: 35px;background-color:rgba(255,255,255,1)">
            <el-col :span="5" style="border-right: 1px solid #e9eaec">关注对象</el-col>
            <el-col :span="19">信息</el-col>
        </el-row>

        <!--主体-->
        <el-row style="height: 93%">


            <!--头像和姓名-->
            <el-col :span="5" style="border-right: 1px solid #e9eaec;background-color:rgba(255,255,255,1)">
                <!--关注对象-->
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        background-color="#ffffff"
                        text-color="#303133"
                        mode="horizontal"
                        menu-trigger="hover"
                        active-text-color="#ffd04b">
                    <el-submenu :index="index+''" :key="index" v-for="(a,index) in Attention"
                                style="width: 100%">
                        <template slot="title">
                            <!--头像-->
                            <el-image
                                    style="width: 50px; height: 50px;border-radius: 100%"
                                    :src="a.aimage"
                            ></el-image>
                            <!--姓名-->
                            <span slot="title">{{a.aname}}</span>
                        </template>

                        <el-menu-item @click='jumpPages(a)' v-if="a.roles == 3||a.roles == 4" :index="index+'-1'">查看好友详情

                        </el-menu-item>
                        <el-menu-item @click='removeAttention(a,index)' :index="index+'-2'">取消关注</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-col>

            <!--说说信息-->
            <el-col :span="19" style="overflow:auto;padding: 10px;background-color:rgba(255,255,255,0.8)">
                <template v-for="att in Attention">
                    <div v-for="chat in att.chats"
                         style="margin-bottom:5%;border: #e6e6e6 solid 1px;border-radius: 20px;padding: 20px;background-color:rgba(255,255,255,1)">
                        <!--头像 名称-->
                        <el-row>
                            <el-col :span="10">
                                <el-row>
                                    <el-col :span="7">
                                        <el-image
                                                style="width: 50px; height: 50px;border-radius: 100%"
                                                :src="att.aimage"
                                        ></el-image>
                                    </el-col>
                                    <el-col :span="14" style="text-align: left">
                                        <span style="color: #fb7299;font-size: 16px"> {{att.aname}}</span>
                                        <div style="font-size: 12px"> {{chat.mestime}}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <!--信息主体-->
                        <el-row>
                            <el-col :offset="2" :span="19" style="text-align: left">
                                {{chat.mes}}
                            </el-col>
                        </el-row>
                        <!--图片-->
                        <el-row>

                            <el-col :offset="2" :span="18">
                                <template v-for="image in chat.images">
                                    <el-col :span="8">
                                        <el-image
                                                style="width: 150px; height: 150px;"
                                                :src="image.image"
                                        ></el-image>
                                    </el-col>
                                </template>
                            </el-col>
                        </el-row>
                    </div>
                </template>
            </el-col>

        </el-row>
    </el-card>
</template>

<!--我的好友-->
<template id="myFriend">
    <!--信息栏-->
    <el-card shadow="always" style="height: 87%;text-align: center;background-color:rgba(255,251,255,0.1)"
             :body-style="{ height:'100%',padding:'0px' }">
        <!--头部-->
        <el-row style="border-bottom: 1px solid #e9eaec;height: 7%;font-size: 12px;line-height: 35px;background-color:rgba(255,255,255,1)">
            <el-col :span="5" style="border-right: 1px solid #e9eaec">好友</el-col>
            <el-col :span="19">私聊</el-col>
        </el-row>

        <!--主体-->
        <el-row style="height: 93%">


            <!--头像和姓名-->
            <el-col :span="5" style="border-right: 1px solid #e9eaec;background-color:rgba(255,255,255,1)">
                <!--关注对象-->
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        background-color="#ffffff"
                        text-color="#303133"
                        mode="horizontal"
                        menu-trigger="hover"
                        active-text-color="#ffd04b">
                    <el-submenu :index="index+''" :key="index"
                                v-for="(friend,index) in friends"
                                style="width: 100%">
                        <template slot="title">
                            <!--头像-->
                            <el-badge :hidden="friend.unread == 0" :value="friend.unread" :max="99" class="item">
                                <el-image
                                        style="width: 50px; height: 50px;border-radius: 100%"
                                        :src="friend.fimage"
                                ></el-image>
                            </el-badge>
                            <!--姓名-->
                            <span slot="title">{{friend.fname}}</span>
                        </template>
                        <el-menu-item @click='jumpPages(friend)' v-if="friend.roles == 3||friend.roles == 4" :index="index+'-1'">
                            查看好友详情
                        </el-menu-item>
                        <el-menu-item @click="initMes(friend)" :index="index+'-2'">私聊</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-col>

            <!--信息主体-->
            <el-col :span="19" style="background-color:rgba(255,255,255,0.8)">

                <!--聊天的信息框-->
                <ul class="infinite-list" id="privateChat"
                    style="overflow:auto;border: #e6e6e6 solid 1px;height: 60%;margin: 0px;list-style-type:none;padding: 0px">
                    <li v-for="info in mes" class="infinite-list-item" style="width: 97%">
                        <!--我发的信息-->
                        <div v-if="info.recipient == uid">
                            <!--发送时间-->
                            <el-row>
                                <el-col style="margin: 3%;font-size: 12px">{{info.mestime}}</el-col>
                            </el-row>
                            <!--信息主题-->
                            <el-row>
                                <el-col :span="3">
                                    <el-image
                                            style="width: 30px; height: 30px;border-radius: 100%"
                                            :src="friendImage"
                                    ></el-image>
                                    </el-avatar>
                                </el-col>
                                <el-col :span="10">
                                    <el-card :body-style="{ padding: '10px' }" class="box-card"
                                             style="border-radius: 20px;font-size: 14px">
                                        {{info.mes}}
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>


                        <!--朋友发的信息-->
                        <div v-else>
                            <!--发送时间-->
                            <el-rowl>
                                <el-col style="margin: 3%;font-size: 12px">{{info.mestime}}</el-col>
                            </el-rowl>
                            <!--信息主题-->
                            <el-row style="height: 100%">
                                <el-col :offset="11" :span="10">
                                    <el-card class="box-card" style="border-radius: 20px;font-size: 14px">
                                        {{info.mes}}
                                    </el-card>
                                </el-col>
                                <el-col :span="3">
                                    <el-image
                                            style="width: 30px; height: 30px;border-radius: 100%"
                                            :src="userImg"
                                    ></el-image>
                                </el-col>
                            </el-row>
                        </div>
                    </li>
                </ul>

                <el-input
                        type="textarea"
                        :autosize="{ minRows: 5, maxRows: 5}"
                        placeholder="请输入内容"
                        maxlength="100"
                        show-word-limit
                        v-model="inputInfo">
                </el-input>
                <el-button @click="sendMes" :plain="true" style="float: right" type="primary" round>发送</el-button>

            </el-col>

        </el-row>
    </el-card>
</template>
<!--信息通知-->
<template id="myChat">
    <!--信息栏-->
    <el-card shadow="always" style="height: 87%;text-align: center;background-color:rgba(255,251,255,0.8)"
             :body-style="{ height:'100%',padding:'0px' }">
        <!--头部-->
        <el-row style="border-bottom: 1px solid #e9eaec;height: 7%;font-size: 12px;line-height: 35px;background-color:rgba(255,255,255,1)">
            <el-col :span="24">通知信息</el-col>
        </el-row>
        <!--主体-->
        <el-row style="height: 93%">
            <!--通知信息-->
            <el-col :span="24" style="padding: 10px;overflow:auto;">

                <template v-for="(chat,index) in chats">
                    <!--一条通知-->
                    <el-row style="margin-bottom: 3%" v-if="chat.mestype == 2">
                        <el-row style="font-size: 12px">{{chat.mestime}}</el-row>
                        <el-col>
                            <div style="border: #e6e6e6 solid 1px;border-radius: 20px;padding: 20px;background-color:rgba(255,255,255,1)">
                                <!--信息主体-->
                                <el-row>
                                    <el-col :offset="1" :span="19" style="text-align: left;font-size: 14px">
                                        {{chat.mes}}
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button @click="deleteChat(chat.chatid,index)" size="mini" type="danger"
                                                   icon="el-icon-delete" circle></el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>

                    <!--关注请求-->
                    <el-row style="margin-bottom: 3%" v-if="chat.mestype == 3">
                        <el-row style="font-size: 12px">{{chat.mestime}}</el-row>
                        <el-col>
                            <div style="border: #e6e6e6 solid 1px;border-radius: 20px;padding: 20px;background-color:rgba(255,255,255,1)">
                                <!--信息主体-->
                                <el-row>
                                    <el-col :offset="1" :span="19" style="text-align: left;font-size: 14px">
                                        {{chat.mes}}
                                        <el-button-group>
                                            <el-button type="primary"
                                                       @click="addAttention(chat.sender,chat.recipient,index,chat.chatid)"
                                                       size="mini" icon="el-icon-check" circle></el-button>
                                            <el-button type="primary" @click="cancel(chat.chatid,index)" size="mini"
                                                       icon="el-icon-close" circle></el-button>
                                        </el-button-group>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button size="mini" @click="deleteChat(chat.chatid,index)" type="danger"
                                                   icon="el-icon-delete" circle></el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>


                    <!--取消关注请求-->
                    <el-row style="margin-bottom: 3%" v-if="chat.mestype == 4">
                        <el-row style="font-size: 12px">{{chat.mestime}}</el-row>
                        <el-col>
                            <div style="border: #e6e6e6 solid 1px;border-radius: 20px;padding: 20px;background-color:rgba(255,255,255,1)">
                                <!--信息主体-->
                                <el-row>
                                    <el-col :offset="1" :span="19" style="text-align: left;font-size: 14px">
                                        {{chat.mes}}
                                        <el-button-group>
                                            <el-button type="primary"
                                                       @click="cancelAttention(chat.sender,chat.recipient,index,chat.chatid)"
                                                       size="mini" icon="el-icon-check" circle></el-button>
                                            <el-button type="primary" @click="cancel(chat.chatid,index)" size="mini"
                                                       icon="el-icon-close" circle></el-button>
                                        </el-button-group>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button size="mini" @click="deleteChat(chat.chatid,index)" type="danger"
                                                   icon="el-icon-delete" circle></el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>

                    <!--教练认证-->
                    <el-row style="margin-bottom: 3%" v-if="chat.mestype == 6">
                        <el-row style="font-size: 12px">{{chat.mestime}}</el-row>
                        <el-col>
                            <div style="border: #e6e6e6 solid 1px;border-radius: 20px;padding: 20px;background-color:rgba(255,255,255,1)">
                                <!--信息主体-->
                                <el-row>
                                    <el-col :offset="1" :span="19" style="text-align: left;font-size: 14px">
                                        {{chat.mes}}
                                        <el-button type="primary" @click="jumpPagesJump('coachmanage.html')" size="mini"
                                                   icon="el-icon-share"></el-button>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button size="mini" @click="deleteChat(chat.chatid,index)" type="danger"
                                                   icon="el-icon-delete" circle></el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>


                    <!--会馆认证-->
                    <el-row style="margin-bottom: 3%" v-if="chat.mestype == 7">
                        <el-row style="font-size: 12px">{{chat.mestime}}</el-row>
                        <el-col>
                            <div style="border: #e6e6e6 solid 1px;border-radius: 20px;padding: 20px;background-color:rgba(255,255,255,1)">
                                <!--信息主体-->
                                <el-row>
                                    <el-col :offset="1" :span="19" style="text-align: left;font-size: 14px">
                                        {{chat.mes}}
                                        <el-button type="primary" @click="jumpPagesJump('clubmanage.html')" size="mini"
                                                   icon="el-icon-share"></el-button>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button size="mini" @click="deleteChat(chat.chatid,index)" type="danger"
                                                   icon="el-icon-delete" circle></el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>

                    <!--学生订单-->
                    <el-row style="margin-bottom: 3%" v-if="chat.mestype == 8">
                        <el-row style="font-size: 12px">{{chat.mestime}}</el-row>
                        <el-col>
                            <div style="border: #e6e6e6 solid 1px;border-radius: 20px;padding: 20px;background-color:rgba(255,255,255,1)">
                                <!--信息主体-->
                                <el-row>
                                    <el-col :offset="1" :span="19" style="text-align: left;font-size: 14px">
                                        {{chat.mes}}
                                        <el-button type="primary" @click="jumpPagesJump('orderShowStudent.html')"
                                                   size="mini" icon="el-icon-share"></el-button>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button size="mini" @click="deleteChat(chat.chatid,index)" type="danger"
                                                   icon="el-icon-delete" circle></el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>

                    <!--教练订单-->
                    <el-row style="margin-bottom: 3%" v-if="chat.mestype == 9">
                        <el-row style="font-size: 12px">{{chat.mestime}}</el-row>
                        <el-col>
                            <div style="border: #e6e6e6 solid 1px;border-radius: 20px;padding: 20px;background-color:rgba(255,255,255,1)">
                                <!--信息主体-->
                                <el-row>
                                    <el-col :offset="1" :span="19" style="text-align: left;font-size: 14px">
                                        {{chat.mes}}
                                        <el-button type="primary" @click="jumpPagesJump('orderShowCoach.html')"
                                                   size="mini" icon="el-icon-share"></el-button>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button size="mini" @click="deleteChat(chat.chatid,index)" type="danger"
                                                   icon="el-icon-delete" circle></el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>

                    <!--教练申请加入场馆-->
                    <el-row style="margin-bottom: 3%" v-if="chat.mestype == 10">
                        <el-row style="font-size: 12px">{{chat.mestime}}</el-row>
                        <el-col>
                            <div style="border: #e6e6e6 solid 1px;border-radius: 20px;padding: 20px;background-color:rgba(255,255,255,1)">
                                <!--信息主体-->
                                <el-row>
                                    <el-col :offset="1" :span="19" style="text-align: left;font-size: 14px">
                                        {{chat.mes}}
                                        <el-button-group>
                                            <el-button type="primary"
                                                       @click="greeApply(chat)"
                                                       size="mini" icon="el-icon-check" circle></el-button>
                                            <el-button type="primary" @click="refuseApply(chat)" size="mini"
                                                       icon="el-icon-close" circle></el-button>
                                        </el-button-group>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button size="mini" @click="deleteChat(chat.chatid,index)" type="danger"
                                                   icon="el-icon-delete" circle></el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>


                </template>
            </el-col>
        </el-row>
    </el-card>
</template>
<!--我的动态-->
<template id="mySay">
    <!--信息栏-->
    <el-card shadow="always" style="height: 87%;text-align: center;background-color:rgba(255,251,255,0.1)"
             :body-style="{ height:'100%',padding:'0px' }">
        <!--头部-->
        <el-row style="border-bottom: 1px solid #e9eaec;height: 7%;font-size: 12px;line-height: 35px;background-color:rgba(255,255,255,1)">
            <el-col :span="10" style="border-right: 1px solid #e9eaec">发送动态信息</el-col>
            <el-col :span="14">我的动态</el-col>
        </el-row>

        <!--主体-->
        <el-row style="height: 93%">

            <!--主体-->
            <el-col :span="10"
                    style="overflow:auto;border-right: 1px solid #e9eaec;background-color:rgba(255,255,255,0.8)">
                <!--发送信息的地方-->
                <el-card>
                    <el-row>
                        <el-col>
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 5, maxRows: 5}"
                                    placeholder="请输入内容"
                                    maxlength="100"
                                    show-word-limit
                                    v-model="inputInfo">
                            </el-input>
                            <el-button @click="startUpload" :plain="true" style="float: right" type="primary" round>发送
                            </el-button>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-upload
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture"
                                    :multiple="true"
                                    :limit="5"
                                    :before-upload="beforeUpload"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-col>
                    </el-row>
                </el-card>

            </el-col>

            <!--说说信息-->
            <el-col id="mySayMain" :span="14"
                    style="overflow:auto;padding: 10px;background-color:rgba(255,255,255,0.8);">

                <div v-for="chat in chats"
                     style="margin-bottom:2%;border: #e6e6e6 solid 1px;border-radius: 20px;padding: 20px;background-color:rgba(255,255,255,1)">

                    <!--头像 名称-->
                    <el-row>
                        <el-col :span="10">
                            <el-row>
                                <el-col :span="7">
                                    <el-image
                                            style="width: 30px; height: 30px;border-radius: 100%"
                                            :src="image"
                                    ></el-image>
                                </el-col>
                                <el-col :span="17" style="text-align: left">
                                    <span style="color: #fb7299;font-size: 16px"> {{name}}</span>
                                    <div style="font-size: 12px"> {{chat.mestime}}</div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <!--信息主体-->
                    <el-row>
                        <el-col :offset="2" :span="19" style="text-align: left">
                            {{chat.mes}}
                        </el-col>
                    </el-row>
                    <!--图片-->
                    <el-row>
                        <el-col :offset="2" :span="22">
                            <template v-for="image in chat.images">
                                <el-col :span="10">
                                    <el-image
                                            style="width: 150px; height: 150px;"
                                            :src="image.image"
                                    ></el-image>
                                </el-col>
                            </template>
                        </el-col>
                    </el-row>
                </div>


            </el-col>

        </el-row>
    </el-card>
</template>
<!--我的咨询-->
<template id="myConsultation">
    <!--信息栏-->
    <el-card shadow="always" style="height: 87%;text-align: center;background-color:rgba(255,251,255,0.1)"
             :body-style="{ height:'100%',padding:'0px' }">
        <!--头部-->
        <el-row style="border-bottom: 1px solid #e9eaec;height: 7%;font-size: 12px;line-height: 35px;background-color:rgba(255,255,255,1)">
            <el-col :span="5" style="border-right: 1px solid #e9eaec">咨询</el-col>
            <el-col :span="19">私聊</el-col>
        </el-row>

        <!--主体-->
        <el-row style="height: 93%">


            <!--头像和姓名-->
            <el-col :span="5" style="border-right: 1px solid #e9eaec;background-color:rgba(255,255,255,1)">
                <!--关注对象-->
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        background-color="#ffffff"
                        text-color="#303133"
                        mode="horizontal"
                        menu-trigger="hover"
                        active-text-color="#ffd04b">
                    <el-submenu :index="index+''" :key="index"
                                v-for="(consultation,index) in consultations"
                                style="width: 100%">
                        <template slot="title">
                            <!--头像-->
                            <el-badge :hidden="consultation.unread == 0" :value="consultation.unread" :max="99"
                                      class="item">
                                <el-image
                                        style="width: 50px; height: 50px;border-radius: 100%"
                                        :src="consultation.cimage"
                                ></el-image>
                            </el-badge>
                            <!--姓名-->
                            <span slot="title">{{consultation.cname}}</span>
                        </template>

                        <el-menu-item @click='jumpPages(consultation)' v-if="consultation.roles == 3||consultation.roles == 4"
                                      :index="index+'-1'">

                            查看详情
                        </el-menu-item>
                        <el-menu-item @click="initMes(consultation)" :index="index+'-2'">私聊</el-menu-item>
                        <el-menu-item @click="deleteConsultation(consultation.other,index)" :index="index+'-3'">删除
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-col>

            <!--信息主体-->
            <el-col :span="19" style="background-color:rgba(255,255,255,0.8)">

                <!--聊天的信息框-->
                <ul class="infinite-list" id="consultationChat"
                    style="overflow:auto;border: #e6e6e6 solid 1px;height: 60%;margin: 0px;list-style-type:none;padding: 0px">
                    <li v-for="info in mes" class="infinite-list-item" style="width: 97%">
                        <!--我发的信息-->
                        <div v-if="info.recipient == uid">
                            <!--发送时间-->
                            <el-row>
                                <el-col style="margin: 3%;font-size: 12px">{{info.mestime}}</el-col>
                            </el-row>
                            <!--信息主题-->
                            <el-row>
                                <el-col :span="3">
                                    <el-image
                                            style="width: 30px; height: 30px;border-radius: 100%"
                                            :src="ConsultationImage"
                                    ></el-image>
                                    </el-avatar>
                                </el-col>
                                <el-col :span="10">
                                    <el-card :body-style="{ padding: '10px' }" class="box-card"
                                             style="border-radius: 20px;font-size: 14px">
                                        {{info.mes}}
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>


                        <!--朋友发的信息-->
                        <div v-else>
                            <!--发送时间-->
                            <el-rowl>
                                <el-col style="margin: 3%;font-size: 12px">{{info.mestime}}</el-col>
                            </el-rowl>
                            <!--信息主题-->
                            <el-row style="height: 100%">
                                <el-col :offset="11" :span="10">
                                    <el-card class="box-card" style="border-radius: 20px;font-size: 14px">
                                        {{info.mes}}
                                    </el-card>
                                </el-col>
                                <el-col :span="3">
                                    <el-image
                                            style="width: 30px; height: 30px;border-radius: 100%"
                                            :src="userImg"
                                    ></el-image>
                                </el-col>
                            </el-row>
                        </div>
                    </li>
                </ul>

                <el-input
                        type="textarea"
                        :autosize="{ minRows: 5, maxRows: 5}"
                        placeholder="请输入内容"
                        maxlength="100"
                        show-word-limit
                        v-model="inputInfo">
                </el-input>
                <el-button @click="sendMes" :plain="true" style="float: right" type="primary" round>发送</el-button>

            </el-col>

        </el-row>
    </el-card>
</template>
</body>
<!-- 先引入 Vue -->
<script src="../js/vue.js"></script>
<!--引入axios -->
<script src="../js/axios.js"></script>
<!-- 引入组件库 -->
<script src="../js/element.js"></script>
<!--引入路由-->
<script src="../js/vue-router.js"></script>

<script src="../js/jquery.min.js"></script>
<script>


    var myFollow = Vue.extend({
        template: "#myFollow",
        data: function () {
            return {Attention: ""}
        },
        methods: {
            jumpPages: function (a) {
                switch (a.roles) {
                    case 2:
                        window.location.href = "http://" + ip + ":8080/";
                        break;
                    case 3:
                        window.location.href = "http://" + ip + ":8080/coachmes.html?uid=" + a.other;
                        break;
                    case 4:
                        window.location.href = "http://" + ip + ":8080/coachmes.html?uid=" + a.other;
                        break;
                }
            }, removeAttention: function (a, index) {
                var temp = this;
                temp.Attention.splice(index, 1);
                axios.get("/relation/cancelAttention?me=" + user.uid + "&other=" + a.other).then(function (value) {
                    temp.$message(value.data)
                })
            }
        },
        beforeMount: function () {
            var temp = this;
            axios.get("/info/findSay?uid=" + user.uid).then(function (value) {
                temp.Attention = value.data;
            })
        }
    })

    var myFriend = Vue.extend({
        template: "#myFriend",

        data: function () {
            return {
                friends: "",
                uid: user.uid,
                inputInfo: "",
                nowFriend: "",
                friendImage: "",
                friendName: "",
                mes: "",
                webSocket: "",
                userImg: ""
            };
        },
        methods: {
            initMes: function (friend) {
                var temp = this;
                this.nowFriend = friend;
                this.friendImage = friend.fimage;
                this.friendName = friend.fname;
                this.userImg = user.image;
                axios.get("/info/findPrivateChat?meUid=" + user.uid + "&otherUid=" + temp.nowFriend.friend)
                    .then(function (value) {
                        temp.mes = value.data;
                    });
                axios.get("/info/updatePrivateChat?sender=" + temp.nowFriend.friend + "&recipient=" + user.uid);
            },
            initWebSocket: function () {
                var temp = this;
                var url = "ws://" + ip + ":8080/websocket/" + user.uid;
                //建立连接
                var ws = new WebSocket(url); //html5中提供了
                //给open事件绑定方
                ws.onopen = function () {
                    console.info("连接成功");
                }
                //接收到数据
                ws.onmessage = function (result) {
                    var chat = JSON.parse(result.data)
                    temp.mes.push(chat);
                }
                //关闭连接
                ws.onclose = function () {
                    console.info("关闭连接");
                }
                this.webSocket = ws;
            },
            sendMes: function () {
                var chat = {
                    sender: user.uid,
                    recipient: this.nowFriend.friend,
                    mes: this.inputInfo,
                    mestime: this.timeFormate(),
                    mestype: 1
                };
                if (this.webSocket != null && chat.mes.length != 0) {
                    this.webSocket.send(JSON.stringify(chat));
                    this.mes.push(chat);
                    this.inputInfo = "";
                } else if (chat.mes.length == 0) {
                    this.$message({
                        message: "信息不能为空",
                        center: true
                    })
                }
                this.scrollToBottom();
            },
            timeFormate: function () {
                var now = new Date();

                var year = now.getFullYear();       //年
                var month = now.getMonth() + 1;     //月
                var day = now.getDate();            //日

                var hh = now.getHours();            //时
                var mm = now.getMinutes();          //分
                var ss = now.getSeconds();    //秒

                var ddate = year + "-";

                if (month < 10)
                    ddate += "0";

                ddate += month + "-";

                if (day < 10)
                    ddate += "0";

                ddate += day + " ";

                if (hh < 10)
                    ddate += "0";

                ddate += hh + ":";
                if (mm < 10) ddate += '0';
                ddate += mm;
                ddate += ":" + ss;
                return (ddate);
            },
            scrollToBottom: function () {
                this.$nextTick(function () {
                    document.getElementById('privateChat').scrollTop = document.getElementById('privateChat').scrollHeight;
                })
            }, jumpPages: function (friend) {
            
                switch (friend.roles) {
                    case 2:
                        window.location.href = "http://" + ip + ":8080/";
                        break;
                    case 3:
                        window.location.href = "http://" + ip + ":8080/coachmes.html?uid=" + friend.friend;
                        break;
                    case 4:
                        window.location.href = "http://" + ip + ":8080/coachmes.html?uid=" + friend.friend;
                        break;
                }
            }

        }, beforeMount: function () {
            this.initWebSocket();
            var temp = this;
            axios.get("/relation/findFriend?uid=" + user.uid).then(function (value) {
                temp.friends = value.data;
            });
        }, updated: function () {
            this.scrollToBottom();
        }

    })

    var myChat = Vue.extend({
        template: "#myChat",
        data: function () {
            return {
                chats: ""
            }
        },
        methods: {
            deleteChat: function (chatid, index) {
                var temp = this;
                axios.get("/info/deleteChat?chatid=" + chatid).then(function (value) {
                    temp.$message(value.data + "");
                });
                this.chats.splice(index, 1);
            },
            addAttention: function (sender, recipient, index, chatid) {
                var temp = this;
                axios.get("/relation/addAttention?me=" + recipient + "&other=" + sender).then(function (value) {
                    temp.$message(value.data + "");
                    if (value.data.indexOf("成功") != -1) {
                        temp.cancel(chatid, index);
                    } else if (value.data.indexOf("已经关注") != -1) {
                        temp.cancel(chatid, index);
                    }
                })
            },
            cancelAttention: function (sender, recipient, index, chatid) {
                var temp = this;
                axios.get("/relation/cancelAttention?me=" + recipient + "&other=" + sender).then(function (value) {
                    temp.$message(value.data + "");
                    if (value.data.indexOf("成功") != -1) {
                        temp.cancel(chatid, index);
                    } else if (value.data.indexOf("你没有关注该对象") != -1) {
                        temp.cancel(chatid, index);
                    }
                })
            },
            jumpPagesJump: function (url) {
                window.location.href = "http://" + ip + ":8080/" + url;
            },
            cancel: function (chatid, index) {
                axios.get("/info/updateChat?chatid=" + chatid + "&mestype=" + 2);
                this.chats[index].mestype = 2;
            }, greeApply: function (chat) {
                var temp = this;
                axios.get("/yogaclub/agree?sender=" + chat.sender + "&recipient=" + chat.recipient).then(function (value) {
                    temp.$message(value.data);
                })
            }, refuseApply: function (chat) {
                var temp = this;
                axios.get("/yogaclub/refuse?sender=" + chat.sender + "&recipient=" + chat.recipient).then(function (value) {
                    temp.$message(value.data);
                })
            }
        }, beforeMount: function () {
            var temp = this;
            axios.get("/info/findChat?recipient=" + user.uid).then(function (value) {
                temp.chats = value.data;
            });
            axios.get("/info/updateOtherChat?uid=" + user.uid);
        }
    })

    var mySay = Vue.extend({
        template: "#mySay",
        inject: ['reload'],
        data: function () {
            return {
                chats: "",
                inputInfo: "",
                image: "",
                name: "",
                dialogImageUrl: '',
                dialogVisible: false,
                files: []
            }
        }, methods: {
            scrollToBottom: function () {
                this.$nextTick(function () {
                    document.getElementById('mySayMain').scrollTop = document.getElementById('mySayMain').scrollHeight;
                })
            },
            handleRemove: function (file, fileList) {
                this.files.splice(fileList, 1);

            },
            handlePictureCardPreview: function (file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }, beforeUpload: function (file) {
                this.files.push(file);
            }, startUpload: function () {

                if (this.inputInfo.length == 0) {
                    this.$message("发送信息不能为空");
                    return;
                }
                var temp = this;
                var a = new FormData()
                a.append("sender", user.uid);
                a.append("mes", this.inputInfo);
                axios.post("/info/addSay", a).then(function (value) {
                    if (value.data == null || value.data == 0) {
                        temp.$message("动态发送失败，请联系管理员");
                        return
                    }
                    if (temp.files.length > 0) {
                        var b = new FormData();
                        for (var i = 0; i < temp.files.length; i++) {
                            b.append("uploadFiles", temp.files[i], temp.files[i].name);
                        }
                        b.append("chatid", value.data);
                        axios.post("/info/multipleImageUpload", b).then(function (value1) {
                            temp.$message(value1.data)
                            if (value1.data.indexOf("成功") != -1) {
                                temp.reload();
                            }
                        });
                    } else {
                        temp.$message("动态发送成功");
                        temp.reload();
                    }
                });
            }

        }, beforeMount: function () {
            var temp = this;
            this.image = user.image;
            this.name = user.name;
            axios.get("/info/findUserSay?meUid=" + user.uid).then(function (value) {
                temp.chats = value.data
            });
        }, updated: function () {
            this.scrollToBottom();
        }
    })

    var myConsultation = Vue.extend({
        template: "#myConsultation",

        data: function () {
            return {
                consultations: "",
                uid: user.uid,
                inputInfo: "",
                nowConsultation: "",
                ConsultationImage: "",
                ConsultationName: "",
                mes: "",
                webSocket: "",
                userImg: ""
            };
        },
        methods: {
            initMes: function (consultation) {
                var temp = this;
                this.nowConsultation = consultation;
                this.ConsultationImage = consultation.cimage;
                this.ConsultationName = consultation.cname;
                this.userImg = user.image;
                axios.get("/info/findConsultationChat?meUid=" + user.uid + "&otherUid=" + temp.nowConsultation.other)
                    .then(function (value) {
                        temp.mes = value.data;
                    });
                axios.get("/info/updateConsultationChat?sender=" + temp.nowConsultation.other + "&recipient=" + user.uid);
            },
            initWebSocket: function () {
                var temp = this;
                var url = "ws://" + ip + ":8080/websocket/" + user.uid;
                //建立连接
                var ws = new WebSocket(url); //html5中提供了
                //给open事件绑定方
                ws.onopen = function () {
                    console.info("连接成功");
                }
                //接收到数据
                ws.onmessage = function (result) {
                    var chat = JSON.parse(result.data)
                    temp.mes.push(chat);
                }
                //关闭连接
                ws.onclose = function () {
                    console.info("关闭连接");
                }
                this.webSocket = ws;
            },
            sendMes: function () {
                var chat = {
                    sender: user.uid,
                    recipient: this.nowConsultation.other,
                    mes: this.inputInfo,
                    mestime: this.timeFormate(),
                    mestype: 12
                };
                if (this.webSocket != null && chat.mes.length != 0) {
                    this.webSocket.send(JSON.stringify(chat));
                    this.mes.push(chat);
                    this.inputInfo = "";
                } else if (chat.mes.length == 0) {
                    this.$message({
                        message: "信息不能为空",
                        center: true
                    })
                }
                this.scrollToBottom();
            },
            timeFormate: function () {
                var now = new Date();

                var year = now.getFullYear();       //年
                var month = now.getMonth() + 1;     //月
                var day = now.getDate();            //日

                var hh = now.getHours();            //时
                var mm = now.getMinutes();          //分
                var ss = now.getSeconds();    //秒

                var ddate = year + "-";

                if (month < 10)
                    ddate += "0";

                ddate += month + "-";

                if (day < 10)
                    ddate += "0";

                ddate += day + " ";

                if (hh < 10)
                    ddate += "0";

                ddate += hh + ":";
                if (mm < 10) ddate += '0';
                ddate += mm;
                ddate += ":" + ss;
                return (ddate);
            },
            scrollToBottom: function () {
                this.$nextTick(function () {
                    document.getElementById('consultationChat').scrollTop = document.getElementById('consultationChat').scrollHeight;
                })
            }, jumpPages: function (consultation) {
                switch (consultation.roles) {
                    case 2:
                        window.location.href = "http://" + ip + ":8080/";
                        break;
                    case 3:
                        window.location.href = "http://" + ip + ":8080/coachmes.html?uid=" + consultation.other;
                        break;
                    case 4:
                        window.location.href = "http://" + ip + ":8080/coachmes.html?uid=" + consultation.other;
                        break;
                }
            }, deleteConsultation: function (other, index) {
                var temp = this;
                axios.get("/relation/deleteConsultation?me=" + user.uid + "&other=" + other).then(function (value) {
                    if (value.data != null) {
                        temp.$message("删除成功");
                        temp.consultations.splice(index, 1);
                    } else {
                        temp.$message("删除失败");
                    }
                })
            }

        }, beforeMount: function () {
            this.initWebSocket();
            var temp = this;
            axios.get("/relation/findConsultationByUid?uid=" + user.uid).then(function (value) {
                temp.consultations = value.data;
            });
        }, updated: function () {
            this.scrollToBottom();
        }

    })


    var abc = new VueRouter({
        routes: [
            {
                path: '*',
                redirect: '/mySay'
            }, {
                path: '/myFollow',
                name: 'myFollow',
                component: myFollow
            }, {
                path: '/myFriend',
                name: 'myFriend',
                component: myFriend
            }, {
                path: '/myChat',
                name: 'myChat',
                component: myChat
            }, {
                path: '/mySay',
                name: 'mySay',
                component: mySay
            }, {
                path: '/myConsultation',
                name: 'myConsultation',
                component: myConsultation
            }
        ]
    })

    var ip = "localhost";

    var user = {
        uid: "",
        name: "",
        image: ""
    };

    new Vue({
        router: abc,
        provide: function () {
            return {
                reload: this.reload
            }
        },
        el: '#app',
        data: {
            navigationBar: [{num: "", name: "/mySay", mes: "发送动态", icon: "el-icon-chat-dot-round"},
                {
                    num: "",
                    name: "/myFollow",
                    mes: "我的关注",
                    icon: "el-icon-chat-dot-round"
                },
                {num: "", name: "/myFriend", mes: "我的好友", icon: "el-icon-chat-dot-round"},
                {num: "", name: "/myConsultation", mes: "我的咨询", icon: "el-icon-chat-dot-round"},
                {
                    name: "/myChat",
                    mes: "我的通知",
                    icon: "el-icon-chat-dot-round"
                }],
            Attention: {},
            mes: "欢迎访问",
            friends: {},
            chats: {},
            isRouterAlive: true,
            totalNum: "",
            consultationNum: "",
            privateNum: "",
            otherNum: ""
        },
        methods: {
            init: function (index) {
                this.mes = this.navigationBar[index].mes;
            },
            reload: function () {
                this.isRouterAlive = false
                this.$nextTick(function () {
                    this.isRouterAlive = true
                })
            },
            UnreadInfo: function () {
                var temp = this;
                var totalNum = "";
                axios.get("/info/findUnreadInfo?recipient=" + user.uid + "&state=未读").then(function (value) {
                    totalNum = value.data
                    if (temp.totalNum != value.data) {
                        axios.get("/info/findUnreadInfo?recipient=" + user.uid + "&state=未读&mestype=1").then(function (value1) {
                            axios.get("/info/findUnreadInfo?recipient=" + user.uid + "&state=未读&mestype=12").then(function (value2) {
                                temp.totalNum = totalNum;
                                temp.privateNum = value1.data
                                temp.consultationNum = value2.data
                                temp.otherNum = temp.totalNum - temp.privateNum - temp.consultationNum
                                temp.navigationBar[2].num = temp.privateNum;
                                temp.navigationBar[3].num = temp.consultationNum;
                                temp.navigationBar[4].num = temp.otherNum;
                            })
                        })
                    }
                })


            }
        },
        beforeMount: function () {
            var temp = this;

            $.ajax({
                url: "/user/findUidImage",
                type: "get",
                async: false,
                success: function (data) {
                    if (data != null && data.uid > 0) {
                        user = data;
                    } else {
                        window.location.href = "http://" + ip + ":8080/index.html";
                    }
                }
            })
            this.UnreadInfo();
        }, updated: function () {
            this.UnreadInfo();
        }

    })

    new Vue({
        el: "#navigationBar",
        data: {roles: ""},
        beforeCreate: function () {
            var temp = this;
            axios.get("/user/getRoles").then(function (value) {
                temp.roles = value.data
            });
        }
    })

</script>


<script>

</script>
</html>